<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*设置当前网页的视距为800px，人眼距离网页的距离
			 透视的效果*/
			html{
				perspective: 800px;
			}
			
			
			body{
				border: 1px solid black;
				background-color: rgb(241,241,241);
			}
			.box1{
				width: 200px;
				height: 200px;
				background-color: #bfa;
				margin: 200px auto;
				transition: 2s;
				
				
				/*
				 z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，
				 距离越大，元素距离人越近
				  z轴平移属于立体效果（近大远小），默认情况下网页时不支持透视，
				  如果需要看见效果，
				  必须要设置网页的视距*/
			}
			
			body:hover .box1{
				transform: translateZ(400px);
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
	</body>
</html>
